{include file="public/header" /} {include file="public/menu" /}
<style>
    .input-title {
        font-size: 14px;
        color: #333;
        border: none;
        width: 950px;
        padding: 0 5px;
        outline: none;
    }
    hr{
        width:800px;
    }

</style>
<form class="layui-form" action="">
<div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <ul class="layui-tab-title site-demo-title">
        <li><a href="{:url('banner/index')}">轮播图管理</a></li>
        <li class="layui-this"><a href="{:url('banner/postdata')}">添加轮播图</a></li>
    </ul>
    <div class="layui-body layui-tab-content site-demo site-demo-body">
        <div class="layui-main">
            <div class="layui-upload" style="margin-top: 10px;">

                <label class="layui-form-label">封面图</label>
                <button  id="file_upload" style="margin-top: 10px;" type="button" class="layui-btn">点击上传(1920X600)</button ">
            </div>
            <div class="layui-upload" style="margin-top: 10px;">

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="img">
                    {if isset($banner_info['pic'])}
                        <img id="pic" height="100" src="{$banner_info['pic']}" alt="">
                    {/if}
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排列顺序</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" id="displayorder" placeholder="请输入排列顺序" autocomplete="off" class="layui-input" {if isset($banner_info['displayorder'])} value="{$banner_info['displayorder']}"  {/if} >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">外链</label>
                <div class="layui-input-block">
                    <input type="text" name="link"  id="link" lay-verify="title" autocomplete="off" placeholder="请输入外链" class="layui-input" {if isset($banner_info['link'])} value="{$banner_info['link']}" {/if}>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="status" name="status" lay-skin="switch" lay-filter="switchTest" lay-text="是|否" {if isset($banner_info['status'])&& $banner_info['status']==0} {else}checked {/if}>
                </div>
            </div>

            <hr>
            <label class="layui-form-label"></label>
            <input name="id" id="id" type="hidden" {if isset($banner_info['id'])}  value="{$banner_info['id']}" {/if}>
            <button lay-filter="save" type="button" class="layui-btn  save">保存</button>

        </div>
    </div>
</div>
</form>
<!-- 编辑器源码文件 -->
<script type="text/javascript">
    layui.use('upload', function(){
        var $ = layui.$
        var upload = layui.upload;
        //执行实例
        upload.render({
            elem: '#file_upload', //绑定元素
            url: "{:url('Common/upload')}", //上传接口
            accept:'image',
            done: function(res){
                console.log(res);
                var html='<img id="pic" height="100" src="'+res.filepath+'" alt="">';
                $('.img').html(html)
            },
            error: function(){
                layer.msg('上传失败');
            }
        });
    });
    layui.use(['layer', 'form'], function() {

        var $ = layui.$, //重点处
            layer = layui.layer,
            status,
            id=$('#id').val()?$('#id').val():0;
        $('.save').click(function(){
            var displayorder=$('#displayorder').val(),
                link=$('#link').val();
            if($('.layui-unselect').hasClass('layui-form-onswitch')){
                status='1';
            }else{
                status='0';
            }
            var pic=$("#pic").attr('src');

            if (pic == "" || pic == null ) {
                layer.msg('请上传图片');
                return false;
            }
            $.ajax({
                type: "post",
                url: "{:url('banner/postdata')}",
                data:{
                    'id':id,
                    'pic':pic,
                    'displayorder':displayorder,
                    'link':link,
                    'status':status
                },
                success: function(data) {
                    var res = JSON.parse(data);
                    if (res.status == '201') {
                        layer.msg(res.msg);
                    } else if (res.status == '200') {
                        location.href = '{:url("banner/index")}';
                    }
                }
            });
        })
    });
</script>
{include file="public/footer" /}